<template>
  <view>
    <scroll-view class="list" scroll-y>
      <view class="textarea-box">
        <text class="textarea__label">整改内容</text>

        <t-textarea
          class="textarea"
          name="隐患整改内容"
          placeholder="请输入"
          v-model:value="formData.content"
        />
      </view>

      <DateTimeSelect
        title="隐患整改时间"
        v-model:value="formData.securedTime"
      />

      <ImgUpload
        title="隐患整改图片"
        :files="files"
        url="/api/v1/hazardRectification/pics"
      />

      <!-- 可编辑区域 E -->
    </scroll-view>

    <view class="btn-box">
      <t-button
        size="large"
        theme="primary"
        shape="round"
        block
        @click="submitData"
        >提交</t-button
      >
      <t-button size="large" shape="round" block @click="cancel">取消</t-button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, watch, getCurrentInstance, nextTick } from "vue";
import DateTimeSelect from "@/components/dateTimeSelect/index.vue";
import ImgUpload from "@/components/imgUpload/index.vue";
import { fixHidden } from "@/api/hiddenDanger.js";
import { onLoad } from "@dcloudio/uni-app";

const { proxy } = getCurrentInstance();

const info = ref({});

onLoad(async () => {
  await nextTick();
  const eventChannel = proxy.getOpenerEventChannel();
  eventChannel.on("sendInfo", (data) => {
    //data:接收到的数据
    console.log(data);
    info.value = data.info;
  });
});

const files = ref([]);

const formData = reactive({
  hazardId: "",
  picIds: [],
  content: "",
  securedTime: "",
});

watch(
  files,
  (val) => {
    // console.log("文件变化", val);
    formData.picIds = val.map((item) => item.id);
  },
  {
    deep: true,
  }
);

const cancel = () => {
  uni.navigateBack();
};

const submitData = () => {
  if (!formData.content)
    return uni.showToast({
      title: "请输入隐患整改内容",
      icon: "none",
    });

  if (!formData.picIds.length)
    return uni.showToast({
      title: "请上传隐患整改图片",
      icon: "none",
    });

  if (!info.value.id) return;

  formData.hazardId = info.value.id;

  fixHidden(formData).then((res) => {
    console.log("res", res);
    if (res.code === 0) {
      uni.showToast({
        title: "提交成功",
        icon: "none",
      });
      uni.navigateBack();
    }
  });
};
</script>

<style lang="less" scoped>
.list {
  height: 78vh;
}

.btn-box {
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 30rpx;
  height: 100rpx;
  background-color: #fff;
  border-top: 1rpx solid #e5e5e5;
  position: absolute;
  bottom: 20rpx;
  width: 100%;
}

.textarea-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 30rpx;
  width: 100%;

  .textarea__label {
    margin-bottom: 20rpx;
    text-align: right;
  }
}
.textarea {
  height: 300rpx;
  width: 100%;
}
</style>
